/*
 * Created: 2022-09-17 15:05:41
 * Author : 涛涛涛
 */

import Taro from '@tarojs/taro';
import React, { FC, useContext, useMemo } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { HomeSearchContext } from '@/pages/HomeSearch/HomeSearchContext';
import { Product_Web } from '@/pages/_server/_class/Product/Product';
import ProductCard from '@/pages/components/ProductCard/ProductCard';
import CardTitle from '@/pages/HomeSearch/components/CardTitle/CardTitle';
export interface IProps extends ICompProps {}
KeywordsMatchedRecord.defaultProps = {} as Partial<IProps>;
function KeywordsMatchedRecord(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('KeywordsMatchedRecord', className);
    const { searchReducer } = useContext(HomeSearchContext);
    const gotoPageDetail = (product: Product_Web) => {
        Taro.redirectTo({
            url: `pages/ProductExhibition/ProductExhibition?productId=${product.id}`,
        });
    };
    return (
        <RootView className={localClassName} style={style}>
            <CardTitle>搜索结果</CardTitle>
            <View className="ProductCardList">
                {searchReducer.productList.map((product) => {
                    return (
                        <ProductCard
                            className="ProductCard"
                            key={product.id}
                            title={product.artwork.name}
                            subTitle={product.artwork.intro}
                            imgUrl={product.artwork.iconUrl}
                            price={product.price}
                            classCard="willPay"
                            isCollection={true}
                            footRight={<></>}
                            onClick={() => gotoPageDetail(product)}
                        />
                    );
                })}
            </View>
        </RootView>
    );
}
export default React.memo(KeywordsMatchedRecord as FC<IProps>);
const RootView = styled(View)`
    &.KeywordsMatchedRecord {
        .ProductCardList {
            margin-top: 20px;
            .ProductCard + .ProductCard {
                margin-top: 20px;
            }
        }
    }
`;
